<template>
  <div>
  <div class="zhongBox">
    <el-row>
      <el-col class="zhongTop" :span="6">
        <span class="myIndent">{{myIndent}}</span>
      </el-col>
      <el-col class="zhongTop" :span="12"></el-col>
      <el-col class="zhongTop" :span="4">
        <p class="allIndent">{{allIndent}}</p>
      </el-col>
      <el-col class="zhongTop" :span="2">
        <i class="rightIcon el-icon-arrow-right"></i>
      </el-col>
    </el-row>
    <el-row>
        <el-col class="zhongNav" v-on:click.native="changeColor(index)" :span="6" v-for="(item,index) in zhongIco" :key="index">
          <img v-if="!item.bool" :src="item.src" alt="">
          <img v-else-if="item.bool" :src="item.src2" alt="">
          <p :class="[item.bool?'iconP2':'iconP']">{{item.text}}</p>
        </el-col>
        <el-col class="zhongxia" :style="{left:zhongxia}" :span="6"></el-col>
    </el-row>
  </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {
      myIndent: '我的订单',
      allIndent: '全部订单',
      zhongxia: '0',
      zhongIco: [
        { src: '../../../static/img/卡片.png',
          src2: '../../../static/img/卡片(1).png',
          text: '代付款',
          link: 'pay',
          bool: true
        },
        { src: '../../../static/img/222.png',
          src2: '../../../static/img/111.png',
          text: '待使用',
          link: 'use',
          bool: false
        },
        { src: '../../../static/img/dot.png',
          src2: '../../../static/img/dot(1).png',
          text: '订单',
          title: '待评价',
          link: 'order',
          bool: false
        },
        { src: '../../../static/img/card.png',
          src2: '../../../static/img/card_o.png',
          text: '退款/售后',
          link: 'server',
          bool: false
        }
      ]
    }
  },
  methods: {
    changeColor (index) {
      for (let i = 0; i < this.zhongIco.length; i++) {
        this.zhongIco[i].bool = false
      }
      this.zhongIco[index].bool = true
      switch (index) {
        case 0: this.zhongxia = '0'; break
        case 1: this.zhongxia = '25%'; break
        case 2: this.zhongxia = '50%'; break
        case 3: this.zhongxia = '75%'; break
      }
      this.go(index)
    },
    go (index) {
      this.$router.push({
        name: this.zhongIco[index].link,
        query: {HeadName: '我的订单'}
      })
    }
  }
}
</script>title
<style lang="scss">
  .zhongBox{
    width:100%;
    height:223px;
    background:#fff;
    box-sizing: border-box;
    padding:0 20px 0 20px;
    .zhongTop{
      height:82px;
      border-bottom: 1px solid #eee;
      text-align: center;
      .myIndent{
        font-size: 28px;
        line-height: 82px;
      }
      .allIndent{
        display: inline-block;
        width: 120px;
        text-align: right;
        font-size: 25px;
        color:#cfcfcf;
        line-height: 82px;
      }
      .rightIcon{
        font-size: 40px;
        line-height: 80px;
        color:#cfcfcf;
      }
    }
    .zhongNav{
      height:135px;
      text-decoration: none;
      img{
        width:54px;
        display: block;
        margin:25px auto 5px auto;
      }
      .iconP{
        text-align: center;
        color:#999;
        font-size: 27px;
      }
      .iconP2{
        text-align: center;
        color:#f57129;
        font-size: 27px;
      }
    }
    .zhongxia{
       height:5px;
       width:25%;
       background:#ff621d;
       transition: all .5s;
       position: relative;
       left:0;
     }
  }
</style>
